{% extends "base.html" %}

{% block title %} - Сопроводительные письма{% endblock %}

{% block content %}
    {% if data %}
        <ul class="list-group list-group-flush">
            <li class="list-group-item">Всего: {{ data|length }}</li>
            {% for item in data %}
                <li class="list-group-item d-flex justify-content-between align-items-start">
                    <div class="ms-2 me-auto">
                        <div class="fw-bold">
                            #{{ item.id }}#
                            <a class="btn btn-light btn-sm"
                               href="{{ item.alternate_url }}"
                               role="button"
                               target="_blank">
                                {{ item.name }}
                            </a></div>
                        <p class="fs-6 fw-light">{{ item.cover_letter }}</p>
                        <small> {{ item.suitable_skills }} #{{ item.coincidence }}%</small>
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <a class="btn btn-outline-danger btn-sm disabled"
                               href="#"
                               role="button">
                                [ Edit ]
                            </a>
                            <a class="btn btn-outline-primary btn-sm"
                               href="/cover_letters/{{  item.id }}"
                               role="button">
                                [ Send ]
                            </a>
                            <a class="btn btn-outline-info btn-sm disabled"
                               href="/cover_letters/add_to_table/{{ item.id }}"
                               role="button">
                                [ Add to report ]
                            </a>
                        </div>
                    </div>

                </li>
            {% endfor %}
        <br>
        <div class="d-flex flex-column mb-3">
        <button class="btn btn-outline-warning"
                id="sndBtn"
                style="display: block"
                onclick="showSpinner()">
            [ Отправить все письма ]
        </button>
        </div>

        <div class="d-flex justify-content-center">
            <div class="spinner-border text-warning"
                 role="status"
                 style="display: none"
                 id="spinner">
            </div>
        </div>

        <br>
        </ul>
        <br>

    {% endif %}

    <script>
      function showSpinner() {
        document.getElementById("spinner").style.display = "block";
        document.getElementById("sndBtn").style.display = "none";
        window.location.href = "/cover_letters/send_all";
      }
    </script>

{% endblock %}